<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>jQuery手机移动端模态对话框插件 - A5源码</title>

<link rel="stylesheet" href="css/tpl-style.css">
<link rel="stylesheet" href="css/dialog.css">
<style type="text/css">
.button { padding: 0 15px; cursor: pointer; margin-right: 15px; background: #f6f7fb; border: 1px solid #c7ced2; border-radius: 2px; color: #191d24; display: inline-block; height: 40px; line-height: 40px; text-align: center; outline:none; font-family: "Microsoft Yahei"; }
.button:hover { background-color: #f2f2f2; }
.tpl-wrapper{margin-top: 20px;}
a{border-bottom: none;color:#2fa0cc;}
</style>

</head>
<body>
<div class="tpl-wrapper">
	<div class="panel panel-green">
	<div class="panel-hd"><h2>示例展示</h2></div>
	<div class="panel-bd">				
		<div class="example-wrap">
			
			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">默认</h3>
				<div class="example-show">
					<button id="btn-01" class="button" type="button">弹出对话框</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-01').click(function(){
$.dialog({
contentHtml : '&ltp&gt我是默认弹出对话框示例展示。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">自动关闭</h3>
				<div class="example-show">
					<button id="btn-02" class="button" type="button">弹出对话框</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-01').click(function(){
$.dialog({
autoClose : 2500,
contentHtml : '&ltp&gt我是自动关闭的对话框示例展示。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">无标题</h3>
				<div class="example-show">
					<button id="btn-03" class="button" type="button">弹出对话框</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-03').click(function(){
$.dialog({
showTitle : false,
contentHtml : '&ltp&gt我是没有标题的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">自定义标题</h3>
				<div class="example-show">
					<button id="btn-04" class="button" type="button">弹出对话框</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-04').click(function(){
$.dialog({
titleText : '自定义标题',
contentHtml : '&ltp&gt我是自定义标题的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">Comfirm 类型</h3>
				<div class="example-show">
					<button id="btn-05" class="button" type="button">确定/取消</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-05').click(function(){
$.dialog({
type : 'confirm',
contentHtml : '&ltp&gt我是confirm类型的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">Comfirm 类型, 自定义按钮文字</h3>
				<div class="example-show">
					<button id="btn-06" class="button" type="button">确定/取消</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-06').click(function(){
$.dialog({
type : 'confirm',
buttonText : {
	ok : '自定义-确定',
	cancel : '自定义-取消'
},
contentHtml : '&ltp&gt我是confirm类型的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">Comfirm 类型, 按钮回调函数</h3>
				<div class="example-show">
					<button id="btn-07" class="button" type="button">确定/取消</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-07').click(function(){
$.dialog({
type : 'confirm',
onClickOk : function(){
   alert('你点了确定~~');
},
onClickCancel : function(){        		
   alert('你点了取消~~');
},
contentHtml : '&ltp&gt我是confirm类型的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->
			


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">Comfirm 类型, 状态回调函数</h3>
				<div class="example-show">
					<button id="btn-08" class="button" type="button">确定/取消</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-08').click(function(){
$.dialog({
type : 'confirm',
onBeforeShow : function(){
   alert('显示前执行~~')
},
onShow : function(){
   alert('显示完成后执行~~')
},
onBeforeClosed : function(){
   alert('关闭前执行~~')
},
onClosed : function(){
   alert('关闭后执行，可以看页面title是否改变~~');
   document.title = '我已经关闭拉！';
},
contentHtml : '&ltp&gt我是confirm类型的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">info 类型</h3>
				<div class="example-show">
					<button id="btn-09" class="button" type="button">加载中</button>
					<button id="btn-10" class="button" type="button">成功</button>
					<button id="btn-11" class="button" type="button">失败</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-09').click(function(){
$.dialog({
type : 'info',
infoText : '加载中…',
infoIcon : 'images/icon/loading.gif',
autoClose : 2500
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">info 类型, HTML创建内容</h3>
				<div class="example-show">
					<button id="btn-12" class="button" type="button">成功</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-12').click(function(){
$.dialog({
type : 'info',
contentHtml : '&ltimg class="info-icon" src="images/icon/success.png" alt="操作成功" /&gt&ltp class="info-text"&gt操作成功&lt/p&gt',
autoClose : 2500
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">info 类型, 更改状态</h3>
				<div class="example-show">
					<button id="btn-13" class="button" type="button">加载中 to 成功</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-12').click(function(){
var infoDialog = $.dialog({
type : 'info',
infoText : '加载中…',
infoIcon : 'images/icon/loading.gif'			
});

window.setTimeout(function() {
infoDialog.dialog.update({
	autoClose : 1500,
	infoText : '操作成功',
	infoIcon : 'images/icon/success.png'
});
}, 2500);
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->



		</div>
	</div>			
</div>
</div>

<script src="js/zepto.min.js"></script>
<script src="js/dialog.js"></script>
<script src="js/example.js"></script>

</body>
</html>